<template>
  <div class="form">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="分类名称">
        <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="分类图标">
        <el-upload
          class="avatar-uploader"
          action=""
          accept="image/png, image/jpeg"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChange"
        >
          <img v-if="form.img" :src="form.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="父分类">
        <el-select
          v-model="form.f_id"
          filterable
          placeholder="请选择"
          @change="getData"
          @clear="getData"
          remote
          :remote-method="getData"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权重">
        <el-input
          v-model="form.sort"
          placeholder="请输入权重数值"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="显示状态">
        <el-switch
          v-model="form.isshow"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import oss from "@/mixins/oss";
import pagination from "@/mixins/pagination";
import thead from "@/mixins/thead";
import { get } from "@/util/model/type";
export default {
  name: "type-form",
  props: {
    itemModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mixins: [oss, pagination, thead],
  data() {
    return {
      form: {
        b_id: "",
        f_id: "",
        id: "",
        img: "",
        isshow: "1",
        name: "",
        sort: 0,
      },
      defaultForm: {
        b_id: "",
        f_id: "",
        id: "",
        img: "",
        isshow: "1",
        name: "",
        sort: 0,
      },
      options: [],
      loading: false,
    };
  },
  watch: {
    itemModel(newVal, oldVal) {
      this.formHandle();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    formHandle() {
      if (Object.keys(this.itemModel).length > 0) {
        this.form = this.itemModel;
      } else {
        this.form = {
          b_id: "",
          f_id: "",
          id: "",
          img: "",
          isshow: "1",
          name: "",
          sort: 0,
        };
      }
    },
    async getData(val) {
      this.loading = true;
      this.setSearch();
      if (val) this.setSearch(val);
      // if (refersh == 0) this.pagination.page--;
      // if (refersh == 1) this.pagination.page++;
      // if (!refersh) this.pagination.page = 1;
      const res = await get({
        ...this.getSearch(),
        ...this.getPagination(),
      });
      this.options = res.data;
      this.loading = false;
      this.setTotal(res.total);
    },
    getForm() {
      return this.form;
    },
    async handleChange(file) {
      const result = await this.picUpload(file);
      this.form.img = result.url;
    },
  },
};
</script>

<style lang="scss">
.form {
  text-align: left;
  .el-input {
    width: 240px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>